<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .box-card {
            width: 60%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">


        <router-view></router-view>
    </div>
    <script>
        //1、定义组件
        var login = {
            data() {
                return {
                    loginData: {}

                }

            },
            template: `
            <div>
                <el-card class="box-card">

        <h1>欢迎登录</h1>
        用户名：<input type="text" v-model="loginData.username"><br>
        <!-- &nbsp;代表一个字符 -->
        <!-- &ensp;代表一个英文字符 -->
        <!-- &emsp;代表一个汉字字符 -->
        密&emsp;码：<input type="password" v-model="loginData.password"><br>
        <button @click="click1">登录</button>
</el-card>
               
                
            </div>
            `,
            methods: {
                click1() {
                    //默认是表单，要转为json格式存储
                    axios.defaults.headers.post['Content-Type'] = 'application/json';
                  
                }

            }
        }
        var index = {
            data() {
                return {

                }

            },
            template: `
            <div>欢迎登录</div>
            `,
            methods: {
              async  loading(){
                axios({
                        url: 'http://39.103.160.49:8888/user/login',
                        method: 'get',
                        headers:{
                            'Authorization': sessionStorage.getItem('token'),
                        }
                    }).then(res => {
                        console.log(res.data)
                    })

                }
            },
            created(){
                this.loading();
            }
        }
        //2、路由
        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect: '/login',
                },
                {
                    path: '/login',
                    component: login,
                },
                {
                    path: '/index',
                    component: index,
                },

            ]
        })
        router.beforeEach((to, from, next) => {
           
            if (to.path != '/login' && !token) {
                alert("请登录！");
                next('/login')

            }
            next();
        }
        )
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            //3、定义路由

            router

        })
    </script>
</body>

</html>